<style scoped>
</style>
<!-- 编辑页面 SEO 设置的弹窗 -->
<template>
  <div class="seo-page-dialog">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
      :close-on-click-modal="false" width="960px" @close="close">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="&lt;meta /&gt; 标签之后" name="first">
          <ACEDefault ref="siteMetaCode" />
        </el-tab-pane>
        <el-tab-pane label="&lt;/head&gt; 标签之前" name="second">
          <ACEDefault ref="siteEndHeadCode" />
        </el-tab-pane>
        <el-tab-pane label="&lt;body&gt; 标签之后" name="third">
          <ACEDefault ref="siteBeginBodyCode" />
        </el-tab-pane>
        <el-tab-pane label="&lt;/body&gt; 标签之前" name="fourth">
          <ACEDefault ref="siteEndBodyCode" />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="onSubmit()">保 存</el-button>
        <el-button type="success" size="small" @click="onSubmitAndClose()">保存并关闭</el-button>
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ACEDefault from '@/components/common/ace/Default.vue'
export default {
  data () {
    return {
      maxSize: {
        endMeta: 102400,
        endHeader: 102400,
        beginBody: 102400,
        endBody: 102400
      },
      activeName: 'first',
      loading: true,
      title: '',
      dialogFormVisible: false,
      scode: {
        pageId: -1,
        beginMeta: null,
        endMeta: null,
        endHeader: null,
        beginBody: null,
        endBody: null
      }
    }
  },
  methods: {
    show (id, name) {
      // 初始化数据
      this.dialogFormVisible = true
      this.title = name + '-页面代码内容'
      this.scode.pageId = id
      this.loading = true

      this.$nextTick(() => {
        this.$refs['siteMetaCode'].created()
        this.$refs['siteEndHeadCode'].created()
        this.$refs['siteBeginBodyCode'].created()
        this.$refs['siteEndBodyCode'].created()

        this.$refs['siteMetaCode'].setValue('')
        this.$refs['siteEndHeadCode'].setValue('')
        this.$refs['siteBeginBodyCode'].setValue('')
        this.$refs['siteEndBodyCode'].setValue('')
      })
      // 请求后台获取数据
      this.$post('/code/get-current-page-code', { pageId: this.scode.pageId }).then(response => {
        if (response && parseInt(response.id) > 0) {
          this.scode.beginMeta = response.beginMeta ? response.beginMeta : ''
          this.scode.endMeta = response.endMeta ? response.endMeta : ''
          this.scode.endHeader = response.endHeader ? response.endHeader : ''
          this.scode.beginBody = response.beginBody ? response.beginBody : ''
          this.scode.endBody = response.endBody ? response.endBody : ''

          this.$refs['siteMetaCode'].loaded()
          this.$refs['siteMetaCode'].setValue(this.scode.endMeta)

          this.$refs['siteEndHeadCode'].loaded()
          this.$refs['siteEndHeadCode'].setValue(this.scode.endHeader)

          this.$refs['siteBeginBodyCode'].loaded()
          this.$refs['siteBeginBodyCode'].setValue(this.scode.beginBody)

          this.$refs['siteEndBodyCode'].loaded()
          this.$refs['siteEndBodyCode'].setValue(this.scode.endBody)
        }
        this.loading = false
      })
    },
    onSubmit (callback) {
      // 提交表单
      this.scode.endMeta = this.$refs['siteMetaCode'].getValue()
      this.scode.endHeader = this.$refs['siteEndHeadCode'].getValue()
      this.scode.beginBody = this.$refs['siteBeginBodyCode'].getValue()
      this.scode.endBody = this.$refs['siteEndBodyCode'].getValue()

      if (this.scode.endMeta.length > this.maxSize.endMeta) {
        this.activeName = 'first'
        this.$message.error('<meta /> 标签之后 的代码不能超过 ' + this.maxSize.endMeta + ' 个字符')
        return
      }

      if (this.scode.endHeader.length > this.maxSize.endHeader) {
        this.activeName = 'second'
        this.$message.error('</head> 标签之后 的代码不能超过 ' + this.maxSize.endHeader + ' 个字符')
        return
      }

      if (this.scode.beginBody.length > this.maxSize.beginBody) {
        this.activeName = 'third'
        this.$message.error('<body> 标签之后 的代码不能超过 ' + this.maxSize.beginBody + ' 个字符')
        return
      }

      if (this.scode.endBody.length > this.maxSize.endBody) {
        this.activeName = 'fourth'
        this.$message.error('</body> 标签之后 的代码不能超过 ' + this.maxSize.endBody + ' 个字符')
        return
      }

      this.loading = true
      this.$jpost('/code/update-page-code', this.scode).then(response => {
        if (response && parseInt(response.id) > 0) {
          if (typeof callback === 'function') {
            callback()
          }
        }
        this.loading = false
      })
    },
    close () {
      this.activeName = 'first'
      this.loading = true
      this.title = ''
      this.scode = {
        pageId: -1,
        beginMeta: null,
        endMeta: null,
        endHeader: null,
        beginBody: null,
        endBody: null
      }
    },
    onSubmitAndClose () {
      this.onSubmit(() => {
        this.dialogFormVisible = false
      })
    }
  },
  components: {
    ACEDefault
  }
}

</script>
